// 分支编辑
<template>
  <div>
    <div class="branch_container">
      <container v-for="(item, i) in data" :lines="getLines(i)" :key="i">
        <slot name="branchChildNode" :data="item" />
      </container>
      <div class="addBtn" @click="addBranch" v-if="editType!==3">{{ btnText }}</div>
    </div>
    <div class="branch_action">
      <AddButton @handleAdd="handleAdd" branchDisabled v-if="editType!==3"/>
    </div>
  </div>
</template>

<script>
import container from "./components/frame/container.vue";
import AddButton from "./components/button/AddButton.vue";
import EventBus from "./components/eventBus";
export default {
  props: {
    data: Array,
    editType: Number
  },
  components: {
    container,
    AddButton,
  },
  data() {
    return {};
  },

  computed: {
    branchType() {
      return this.data[0].type;
    },
    btnText() {
      if (this.branchType === "C") {
        return "添加条件";
      } else {
        return "添加分流";
      }
    },
  },

  methods: {
    addBranch() {
      let path = this.data[0].path.slice(0, -1);
      EventBus.$emit("ADD_BRANCH_ITEM", path, this.branchType);
    },
    handleAdd(type) {
      let path = this.data[0].path.slice(0, -2);
      EventBus.$emit("ADD_CHILD", path, type, true);
    },

    getLines(i) {
      if (i === 0) {
        return [1, 2];
      }
      if (i === this.data.length - 1) {
        return [3, 4];
      }
      return [1, 2, 3, 4];
    },
  },
};
</script>

<style scoped>
.branch_container {
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: 9999;
}
.text {
  background: pink;
}
.content {
  display: inline-block;
  height: 50px;
  width: 100px;
  background: red;
  border: 1px solid #000;
}

.addBtn {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background-color: #4989f2;
  border-radius: 15px;
  font-size: 14px;
  padding: 5px 10px;
  cursor: pointer;
  user-select: none;
  z-index: 9999999;
}

.addBtn:hover {
  box-shadow: 0 0 5px #4989f2;
}

.branch_action {
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.branch_action::after {
  content: "";
  height: 100%;
  width: 1px;
  background: #ddd;
  position: absolute;
}
</style>